<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
              <el-form-item label="案件编号" prop="ajbh">
          <el-input
            v-model="queryParams.ajbh"
            placeholder="请输入案件编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      <el-form-item label="被取保候审人(被行政拘留人)" prop="hsr">
        <el-input
          v-model="queryParams.hsr"
          placeholder="请输入被取保候审人(被行政拘留人)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system/bzjtable/export']"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="single" @click="doubleclick(form)">收款</el-button>
      </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

    <el-table v-loading="loading" height="650" :data="bzjtableList" @selection-change="handleSelectionChange" 
       @row-dblclick="doubleclick">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="key" align="center" prop="xh" >
      </el-table-column>
      <el-table-column label="案件编号" align="center" prop="ajbh" width="100px"/>
      <el-table-column label="案件名称" align="center" prop="ajmc" width="200px"/>
      <el-table-column label="收取法律文书号" align="center" prop="sqwsh" width="150px"/>
      <el-table-column label="被取保候审人(被行政拘留人)" align="center" prop="hsr" width="200px"/>
      <el-table-column label="被(行政/刑事)拘留人" align="center" prop="xjr" width="200px"/>
      <el-table-column label="性别" align="center" prop="xb" />
      <el-table-column label="出生日期" align="center" prop="csrq" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.csrq, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="住址" align="center" prop="zz" /> -->
      <el-table-column label="户籍地址" align="center" prop="hjdz" width="250px"/>
      <!-- <el-table-column label="单位及职务" align="center" prop="dwzw" /> -->
      <el-table-column label="联系电话" align="center" prop="lxdh" width="150px"/>
      <el-table-column label="案件性质" align="center" prop="ajxz" width="250px"/>
      <el-table-column label="保证金金额" align="center" prop="sqje" width="100px"/>
      <el-table-column label="收费方式" align="center" prop="sqfs" />
      <el-table-column label="委托交款人代" align="center" prop="jkr" width="100px"/>
      <el-table-column label="委托交款人身份证" align="center" prop="jkrsfz" width="150px"/>
      <el-table-column label="代收银行编号" align="center" prop="dsyhbh" width="210px"/>
      <el-table-column label="缴款时间" align="center" prop="jnsj" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.jnsj, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交纳银行卡号" align="center" prop="jnkh" width="200px"/>
      <el-table-column label="批准人" align="center" prop="pzr" />
      <el-table-column label="取保候审批准时间" align="center" prop="pzsj" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.pzsj, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="办案人" align="center" prop="bar" />
      <el-table-column label="办案人所在单位编号" align="center" prop="dwbh" width="150px"/>
      <el-table-column label="办案单位" align="center" prop="badw" width="100px"/>
      <el-table-column label="收取日期" align="center" prop="sqrq" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sqrq, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="填报时间" align="center" prop="sqtfsj" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sqtfsj, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="填报人" align="center" prop="sqtfr" />
      <el-table-column fixed="right" label="操作"  align="center"  width="150" >
          <template slot-scope="scope">
              <el-button type="warning" plain size="mini" @click="handleckfj(scope.row)">查看附件</el-button>
          </template>
        </el-table-column>
    </el-table>
    
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      <el-dialog :visible.sync="pdfs" width="45%">
           <div style="display: flex;align-items: center;justify-content: center;">
            <img :src="this.pdfUrl" alt width="80%" />
           </div>
      </el-dialog>
      <el-dialog title="查看附件" :visible.sync="dialogFormVisible">
        <el-table height="600" border :data="fileList" :header-cell-style="{ backgroundColor: 'rgb(237 237 237)'}">
          <el-table-column label="文件名称" prop="fjmc" />
          <el-table-column label="环节" prop="lb" />
          <el-table-column label="文件类型" prop="typeName" />
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="handlexzfj(scope.row)" :disabled="!scope.row.wjdz" >下载附件</el-button>
              <el-button type="success" plain size="mini" @click="yul(scope.row)" :disabled="!(scope.row.wjdz.split('.')[1] == 'png' || scope.row.wjdz.split('.')[1] == 'jpg' || scope.row.wjdz.split('.')[1] == 'jpeg')" >预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    <!-- 双击弹窗 -->
        <el-dialog :title="tit" :visible.sync="open" width="45%" @closed="gb">
          <el-form ref="forms" :inline="true" :model="form" :rules="ruless" label-width="120px" class="">
        <el-form-item label="案件编号">
          <el-input v-model="form.ajbh" placeholder="请输入案件编号" :disabled="true" />
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="form.ajmc" placeholder="请输入案件名称" :disabled="true" />
        </el-form-item>
        <el-form-item label="被取保候审人(被行政拘留人)">
          <el-input v-model="form.hsr" placeholder="请输入被取保候审人(被行政拘留人)" :disabled="true" />
        </el-form-item>
        <el-form-item label="人员类别">
          <el-input v-model="form.xjr" placeholder="请输入人员类别" :disabled="true" />
        </el-form-item>
        <el-form-item label="法律文书号">
          <el-input v-model="form.sqwsh" placeholder="请输入法律文书号" :disabled="true" />
        </el-form-item>
        <el-form-item label="收款方式">
          <el-input v-model="form.sqfs" placeholder="线下收款" :disabled="true" />
        </el-form-item>
        <el-form-item label="收款账户" prop="dsyhbh">
          <el-input v-model="form.dsyhbh" placeholder="" :disabled="true" />
        </el-form-item>
        <el-form-item label="收款账户卡号" prop="jnkh">
          <el-input v-model="form.jnkh" placeholder="" :disabled="true" />
        </el-form-item>
        <el-form-item label="收款金额" prop="sqje">
          <el-input v-model="form.sqje" placeholder="请输入收款金额" :disabled="true" />
        </el-form-item>
        <el-form-item label="收款日期" prop="sqrq">
          <el-date-picker clearable v-model="form.sqrq" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择收款日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="附件选择" prop="files">
          <Upload v-model="form.files" :data="{}" acceptTip="*仅图片、PDF类型文件可在线预览"
             multiple></Upload>
        </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdate(form)">收款</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listBzjtable, getBzjtable, delBzjtable, addBzjtable, UnpaidList,collection ,getFjList,downLoadFile} from "@/api/system/bzjtable";
import selectMultiple from '@/views/collect/addSecurity/selectMultiple'
import Print from '@/utils/print.js'
import Upload from '@/views/collect/addSecurity/Upload'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
export default {
  name: "Bzjtable",
  data() {
    let amount = (rule, value, callback) => {
      if (value) {
        if (!/^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/.test(value)) return callback(new Error('请输入非负数、最多含两位小数'))
        if (value <= 0) return callback(new Error('收款金额应大于0'))
        if (value > 999999999999.99) return callback(new Error('收款金额不能超过999999999999.99'))
      } else {
        return callback(new Error('请输入收款金额'))
      }
      callback()
    }
    let dialogVisibleFile = (rule, value, callback) => {
      console.log(value?.length, ';');
      if (rule.required) {
        if (value?.length) {
          callback()
        } else {
          return callback(new Error('请选择文件'))
        }
      }
      callback()
    }
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      directoryList: [],
      fileList : [],
      dialogFormVisible : false,
      pdfs: false,
      isShow: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // qwe表格数据
      bzjtableList: [],
      clickedRowData: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      pdfUrl: '',
      wjdz: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ajbh: null,
        ajmc: null,
        sqwsh: null,
        hsr: null,
        xjr: null,
        xb: null,
        csrq: null,
        zz: null,
        hjdz: null,
        dwzw: null,
        lxdh: null,
        sfzh: null,
        ajxz: null,
        sqje: null,
        sqfs: null,
        sqzt: null,
        jkr: null,
        jkrsfz: null,
        dsyhbh: null,
        jnsj: null,
        jnkh: null,
        pzr: null,
        pzsj: null,
        bar: null,
        dwbh: null,
        badw: null,
        sqrq: null,
        sqtfsj: null,
        sqtfr: null,
        msje: null,
        mszt: null,
        msyy: null,
        mswsh: null,
        mspzr: null,
        mspzsj: null,
        mstfr: null,
        msrq: null,
        mstfsj: null,
        msshzt: null,
        mskhzt: null,
        mskhsj: null,
        mskhczr: null,
        thje: null,
        thfs: null,
        thzt: null,
        thrq: null,
        thwsh: null,
        thpzr: null,
        thtfsj: null,
        thshzt: null,
        thshr: null,
        thshsj: null,
        thxm: null,
        thzh: null,
        thkhh: null,
        djzt: null,
        sqdyzt: null,
        djsj: null,
        sqkpzt: null,
        thkpzt: null,
        hbwsh: null,
        hbdw: null,
        hbje: null,
        hbry: null,
        hbrq: null,
        hblxdh: null,
        hbsj: null,
        hbczy: null,
        thtfr: null
      },
      // 表单参数
      form:{
        xh :null,
        ajbh : null,  
        ajmc : null,
        hsr : null,
        xjr : null,
        sqje :null,
        sqrq : null,
        sqfs :null,
        lxdh: '',
        sfzh: '',
        sqwsh : null,
        sqtfr: this.$store.state.user.name,
        thtfsj: this.getNowFormatDate()
      },
      currentIndex: '',

      // 表单校验
      ruless: {
        // sqje: [{ required: true, validator: amount, trigger: 'change' }],
        sqrq: [{ required: true, trigger: 'change',message: '请选择收款日期' }],
        files: [{ required: true, validator: dialogVisibleFile, trigger: 'change' }]
      }
    };
  },
  components: {
    selectMultiple,
    Upload
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      UnpaidList(this.queryParams).then(response => {
        // response.rows.forEach((item, index) => {
        //   item.pIndex = index + 1
        // })
        this.bzjtableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.getList();
      this.reset();
    },
    yul(val) {
        downLoadFile({ wjdz: val.wjdz }).then(async (data) => {
          // if (this.wjdz && this.wjdz.split('.')[1] == 'png' || this.wjdz &&this.wjdz.split('.')[1] == 'jpg' || this.wjdz.split('.')[1] == 'jpeg') {
            const url = window.URL.createObjectURL(data);
            this.pdfUrl = url;//直接用iframe标签
            this.pdfs = true
          // }
        })
      },
    handlexzfj(val) {
        // this.download('/confiscate/forfeitureOfDeposit/downLoadFile', { wjdz: this.form.wjdz }, `role_${new Date().getTime()}.png`)
        downLoadFile({ wjdz: val.wjdz }).then(async (data) => {
          this.$modal.msgSuccess("下载成功");
          const url = window.URL.createObjectURL(data);
          this.pdfUrl = url;//直接用iframe标签
          const isBlob = blobValidate(data);
          if (val.wjdz && val.wjdz.split('.')[1] == 'png' || val.wjdz &&val.wjdz.split('.')[1] == 'jpg' || val.wjdz &&val.wjdz.split('.')[1] == 'jpeg') {
            if (isBlob) {
              const blob = new Blob([data])
              saveAs(blob, `role_${new Date().getTime()}.png`)
            } else {
              const resText = await data.text();
              const rspObj = JSON.parse(resText);
              const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
              Message.error(errMsg);
            }
          } else if (val.wjdz &&val.wjdz.split('.')[1] == 'pdf') {
            // let pdfUrl = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }));
            // window.open(pdfUrl)
            let blob = new Blob([data], { type: 'application/pdf' });
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `pdf下载`    //下载后的文件名，根据需求定义
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          } else {
            const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) // response就是接口返回的文件流
            const objectUrl = URL.createObjectURL(blob)
            const a = document.createElement('a') // 创建a标签
            a.href = objectUrl
            a.download = 'excel下载' // 自定义文件名
            a.click() // 下载文件
            window.URL.revokeObjectURL(objectUrl) // 释放内存
            // link.remove()
          }
          this.dialogFormVisible = false
        })
      },
    // 表单重置
    reset() {
      this.form = {
        xh: null,
        ajbh: null,
        ajmc: null,
        sqwsh: null,
        hsr: null,
        xjr: null,
        xb: null,
        csrq: null,
        zz: null,
        hjdz: null,
        dwzw: null,
        lxdh: null,
        sfzh: null,
        ajxz: null,
        sqje: null,
        sqfs: null,
        sqzt: null,
        jkr: null,
        jkrsfz: null,
        dsyhbh: null,
        jnsj: null,
        jnkh: null,
        pzr: null,
        pzsj: null,
        bar: null,
        dwbh: null,
        badw: null,
        sqrq: null,
        sqtfsj: null,
        sqtfr: null,
        msje: null,
        mszt: null,
        msyy: null,
        mswsh: null,
        mspzr: null,
        mspzsj: null,
        mstfr: null,
        msrq: null,
        mstfsj: null,
        msshzt: null,
        mskhzt: null,
        mskhsj: null,
        mskhczr: null,
        thje: null,
        thfs: null,
        thzt: null,
        thrq: null,
        thwsh: null,
        thpzr: null,
        thtfsj: null,
        thshzt: null,
        thshr: null,
        thshsj: null,
        thxm: null,
        thzh: null,
        thkhh: null,
        djzt: null,
        sqdyzt: null,
        djsj: null,
        sqkpzt: null,
        thkpzt: null,
        hbwsh: null,
        hbdw: null,
        hbje: null,
        hbry: null,
        hbrq: null,
        hblxdh: null,
        hbsj: null,
        hbczy: null,
        thtfr: null
      };
      this.resetForm("form");
      this.ids = []; 
    },
    // tableRowClassName({ row, column, rowIndex, columnIndex }) {
    //   //逻辑判断决定是否修改样式，如果分组一致则使用同一个样式
    //   return row.pIndex == this.currentIndex ? 'hover-bg' : ''
    // },
    tableCurrentChange(row) {
      // this.form1 = row
      // this.currentIndex = row?.pIndex
    },
    handleckfj(row) {
        this.dialogFormVisible = true
        getFjList({ xh: row.xh }).then((res) => {
          this.fileList = res.rows
          this.fileList.forEach((item) => {
            item.typeName = this.dict.type.sys_type.filter((e)=>item.wjlx==e.value)[0].label
          })
        })
  
      },
    gb() {
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(selection) {
        if (selection.length > 0) {  
          // 假设我们只关心第一行数据  
          const selectedRow = selection[0];  
            
          // 填充 form 对象中对应的字段  
          this.form.xh = selectedRow.xh;  
          this.form.ajbh = selectedRow.ajbh;  
          this.form.ajmc = selectedRow.ajmc;  
          this.form.hsr = selectedRow.hsr;  
          this.form.sqwsh =selectedRow.sqwsh;
          this.form.xjr = selectedRow.xjr; 
          this.form.sqje = selectedRow.sqje;  
          this.form.sqrq = selectedRow.sqrq;  
          this.form.sqfs = selectedRow.sqfs;  
          // 打开对话框  
          // this.open = true;  
          // debugger
          this.ids = selection.map(item => item.xh)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        } else {  
          // 如果没有选中任何行清空form对象
          this.reset(); // 假设你有一个方法来重置 form 对象  
        }  
      },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
        /**双击操作 */
        doubleclick(row){
        this.clickedRowData = row;
        this.form.ajbh = this.clickedRowData.ajbh;
        this.form.ajmc = this.clickedRowData.ajmc;
        this.form.hsr = this.clickedRowData.hsr;
        this.form.sqje = this.clickedRowData.sqje;
        this.form.sqrq = this.clickedRowData.sqrq;
        this.form.xh = this.clickedRowData.xh;
        this.form.xjr = this.clickedRowData.xjr;
        this.form.sqwsh = this.clickedRowData.sqwsh;
        this.form.sqfs =this.clickedRowData.sqfs;
      this.tit = "收款";
      // this.$nextTick(() => {
      //   this.$refs.selectMultiple.value = null;
      // })
      // this.reset();
      // this.$router.push({ 
      //   path: '/another-page', 
      //   query: { rowData: JSON.stringify(row) } 
      // });
      this.open = true;
    },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bzjtable/export', {
          ...this.queryParams
        }, `transfer_${new Date().getTime()}.xlsx`)
      },
        /** 收款按钮操作 */
        handleUpdate(row) {
          debugger
          console.log(this.form)
          console.log(row)

          this.$refs.forms.validate((valid) => {  
      if (valid) {  
          // 表单验证通过，可以进行收款操作  
          collection(row).then(response => {
            this.$modal.msgSuccess("收款成功");
            this.open =false;
            this.title = "收款";
            this.reset();
          });
      } else {  
        // 表单验证失败，给出提示信息  
        this.$message.error('收款失败，请上传上传附件！');  
        return false;  
      }  
    }); 
    },
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
@page {
  size: 1220px 880px;
  margin-top: 0mm;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.creation {
  .el-form-item {
    margin-bottom: 15px;
  }

  ::v-deep.el-input__inner {
    width: 250px;
  }

  .xx {
    ::v-deep.el-input__inner {
      width: 630px;
    }
  }
}

::v-deep .el-table__body-wrapper::-webkit-srollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

//可设置胶囊宽高
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 12px;
  width: 10px;
  opacity: 0.5;
}

// 设置胶囊色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #cdd9e6;
}

.box {
  display: flex;
  justify-content: center;
  padding: 40px;
  height: 800px;

  .heade {
    text-align: center;

    >h4 {
      font-weight: 600;
    }

    >h2 {
      margin: 6px 0 5px 0;
      font-weight: 600;
    }
  }

  .cont {
    margin-top: 30px;

    .line {
      width: 150px;
      height: 20px;
      text-align: right;
      margin-left: 30px;
      border-bottom: 1px solid #000;
    }

    .text {
      text-indent: 24px;
      width: 400px;
      line-height: 40px;
      // margin-top: 50px;
      margin: 20px auto;
    }

    .footer {
      width: 400px;
      margin-top: 50px;
      float: right;
      text-align: center;
    }
  }

  .lf {
    width: 300px;
    border: 1px solid #000;
    margin-right: 50px;
    padding: 6px;
  }

  .lr {
    width: 600px;
    padding: 6px;
    border: 1px solid #000;
  }

  ::v-deep.el-form-item {
    margin-bottom: 0;
  }

  // .noBorder {

  //   ::v-deep.el-input__inner:focus {
  //     box-shadow: 0 0 0 0 !important;
  //   }

  //   ::v-deep.el-input__inner {
  //     border-radius: 0 !important;
  //     border: none !important;
  //     border-bottom: 1px solid #dcdfe6 !important;
  //   }
  // }
}

::v-deep .el-table__body .el-table__row.hover-bg td {
  background-color: #cde6f7 !important;
}</style>